<template>
    <div>
      <hr>
      <h2>子组件</h2>
      <input type="text" v-model="mValue">
      {{reverString}}
      {{reverString}}
      {{reverString}}
      <hr>
    </div>
  </template>
  
  <script>
  export default {
    props:['msg'],//这个msg不能直接用来修改，但是可以把它先放到其他地方去
    data() {
      return {
        //这个只会在 new Vue实例化的时候，才会有值，后续不会发生改变。
        sonValue:this.mValue,
        stringValue:'HelloWoniu'
      }
    },
    //可以使用计算属性来重新转换props中的msg进行赋值
    computed:{
      // mValue是一个属性key，后面属性值，值是一个对象
      mValue:{
        get:function(){
           return this.msg;
        },
        //只要修改mValue，这个set方法就会执行！
        set:function(newValue){
            console.log(newValue);
        }
      },
      reverString:{
              get:function(){
                  return this.stringValue.split('').reverse().join('');
              }
          }
    }
  }
  </script>